import React, { useState } from 'react';
import { PlusOutlined } from '@ant-design/icons';
import { data } from './baseData'
import {
  Button,
  Form,
  Input,
  Upload,
  message
} from 'antd';
import axios from 'axios'
import RightTitle from '@/util/RightTitle'

const { TextArea } = Input;


type SizeType = Parameters<typeof Form>[0]['size'];

const App: React.FC = () => {
  const [form] = Form.useForm();

  const [componentSize, setComponentSize] = useState<SizeType | 'default'>('default');

  const [messageApi, contextHolder] = message.useMessage()

  const [url, seturl] = useState('http://localhost:2001/api/upload')

  const [qr, setqr] = useState('http://localhost:2001/api/qr')


  const onFormLayoutChange = ({ size }: { size: SizeType }) => {
    setComponentSize(size);
  };


  const onFinish = (values: any) => {

    // console.log('success', values);

    (async () => {

      let url = 'http://localhost:2001/api/message';
      const res = await axios.post(url, values)
      console.log(res.data);

      const { status, msg } = res.data

      if (status === 200) {
        messageApi.open({
          type: 'success',
          content: msg,
          duration: 1.2
        });
        onReset()
      } else {
        messageApi.open({
          type: 'warning',
          content: msg,
          duration: 1.2
        });
      }

    })()
  };

  const onReset = () => {
    form.resetFields();
  };

  const normFile = (e: any) => {
    if (Array.isArray(e)) {
      return e;
    }
    return e?.fileList;
  };

  const QR = (e: any) => {
    if (Array.isArray(e)) {
      return e;
    }
    return e?.fileList;
  };

  return (
    <>
      <RightTitle name='设置网站信息' />
      {contextHolder}
      <Form
        labelCol={{ span: 4 }}
        wrapperCol={{ span: 14 }}
        layout="horizontal"
        initialValues={{ size: componentSize }}
        onValuesChange={onFormLayoutChange}
        onFinish={onFinish}
        size={componentSize as SizeType}
        style={{ maxWidth: 600 }}
      >
        <Form.Item label="网站标题" name="site_title">
          <Input />
        </Form.Item>
        <Form.Item label="网站logo" name="site_logo" valuePropName="fileList" getValueFromEvent={normFile}>
          <Upload action={url} method='post' listType="picture-card">
            <PlusOutlined />
          </Upload>
        </Form.Item>
        <Form.Item label="公司二维码" getValueFromEvent={QR} name="company_ewm" valuePropName="Secondist"  >
          <Upload action={qr} method='post' listType="picture-card" >
            <PlusOutlined />
          </Upload>
        </Form.Item>
        {
          data.map((item) => {
            return (
              <Form.Item key={item.id} label={item.label} name={item.name} >
                <Input type={item.type} />
              </Form.Item>
            )
          })
        }
        <Form.Item wrapperCol={{ offset: 0, span: 16 }}>
          <Button type="primary" htmlType="submit">
            保存
          </Button>
        </Form.Item>
      </Form>
    </>
  );
};

export default App;